<template>
	<view class="wrap">
		<view class="header">
		  <view class="main">
		    <image :src="shop.logo" mode="aspectFill"></image>
        <view class="info">
          <view class="name">{{shop.shopName}}</view>
          <view class="address">
            <text class="iconfont icon-address"></text>
            <text>{{shop.city}}{{shop.district}}{{shop.address}}</text>
          </view>
          <view class="phone">
            <text class="iconfont icon-dianhua"></text>
            <text>{{shop.bossPhone}}</text>
          </view>
        </view>
		  </view>
      <view class="description">{{shop.description || '老板是个不拘小节的人🤦‍'}}</view>
      <view class="search">
        <text class="iconfont icon-sousuo"></text>
        <input placeholder="搜索商家、商品名称" type="text" confirm-type="search" @confirm="onSearch" v-model.trim="searchText"/>
        <text class="iconfont icon-biaoqianhuashucha1" @click="clearText"></text>
      </view>
      <button type="default" class="edit" @click="toEdit">修改信息</button>
		</view>
    <view class="tabs">
      <text v-for="(item, index) in status" :class="tabIndex === index ? 'active' : ''" @click="changeTab($event, index)">{{item}}</text>
    </view>
    <view class="list">
      <view class="item" v-for="item in list" @click="toCustomerOrders(item)">
        <image :src="item.headImg" mode="aspectFill"></image>
        <view class="info">
          <view class="name">{{item.nickName}}</view>
          <view class="num">数量: {{item.counts}}</view>
          <view class="num">积分: {{item.points}}</view>
        </view>
        <text class="iconfont icon-xiangyou"></text>
      </view>
    </view>
    <view class="no-data">{{payload.hasmore ? '数据加载中...' : '暂无更多数据'}}</view>
	</view>
</template>

<script>
  import {Shop, Order} from '../../apis/index.js'
  import {utils} from '../../utils/index.js'
  
	export default {
		data() {
			return {
        searchText: '',
        tabIndex: 0,
				status: ['全部', '待支付', '待提货', '待归还', '待确认', '已完成'],
        isLoading: false,
        shop: {},
        list: [],
        payload: {
          hasmore: true,
          current: 1,
          pageSize: 6
        }
			};
		},
    methods: {
      clearText () {
        console.log('清楚搜索框')
        this.searchText = ''
      },
      onSearch () {
        this.payload.hasmore = true
        this.payload.current = 1
        getList.call(this)
      },
      toEdit () {
          uni.navigateTo({
            url: '/pages/createShop/createShop'
          })
      },
      toCustomerOrders (item) {
        console.log('要跳转：', item)
        utils.routerTo('/pages/orderList/orderList?id=' + item.userId)
      },
      changeTab (e, index) {
         this.tabIndex = index
         this.payload.hasmore = true
         this.payload.current = 1
         getList.call(this)
      }
    },
    onPullDownRefresh () {
      this.payload.current = 1
      this.payload.hasmore = true
      getList.call(this)
    },
    onReachBottom () {
      if(!this.payload.hasmore) return
      this.payload.current += 1
      getList.call(this)
    },
    onLoad (options) {
      if (options.status) this.tabIndex = +options.status
      getShopDetail.call(this).then(getList.bind(this))
    }
	}
  
  function getShopDetail() {
    const shopInfo = uni.getStorageSync('shopInfo')
    
    return Shop.getShopDetail({
      data: {
        query: {
          id: shopInfo.id
        }
      }
    }).then(res => {
      if (res.data.code === 200) {
        this.shop = res.data.body
      } else {
        uni.showModal({
          title: '系统提示',
          content: '未找到该店铺',
          success: (res) => {
             console.log(res)
             uni.navigateBack({
               delta: 1
             })
          }
        })
      }
    }, err => {
      console.error(err)
    })
  }
  
  function getList () {
    if (this.isLoading) return
    this.isLoading = true
    utils.wxLoading()
    Order.getCustomersByShop({
      data: {
        query: {
          title: this.searchText,
          id: this.shop.id,
          status: this.tabIndex > 0 ? this.tabIndex : null
        },
        pagination: {
          current: this.payload.current,
          pageSize: this.payload.pageSize
        }
      }
    }).then(res => {
      console.log('获取客户信息成功', res)
      if (res.data.code === 200) {
        this.payload.hasmore = res.data.body.length === this.payload.pageSize
        this.list = this.payload.current === 1 ? res.data.body : this.list.concat(res.data.body)
      } else {
        throw new Error("获取客户信息失败")
      }
    }, err => {
      console.error(err)
    }).finally(() => {
      this.isLoading = false
      uni.stopPullDownRefresh()
      uni.hideLoading()
    })
    
  }
</script>

<style lang="scss">
  .header {
    position: relative;
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #FF4A4A;
    .main {
      display: flex;
      image {
        width: 136rpx;
        height: 136rpx;
        border-radius: 8rpx;
        background-color: #EFEFEF;
      }
      .info {
        flex: 1;
        box-sizing: border-box;
        padding-left: 20rpx;
        .name {
          font-size: 36rpx;
          line-height: 1.5;
        }
        .address, .phone {
          color: #FFFFFF;
          font-size: 24rpx;
          .iconfont {
            font-size: 24rpx;
            padding-right: 10rpx;
          }
        }
      }
    }
    .description {
      box-sizing: border-box;
      padding: 10rpx;
      font-size: 24rpx;
      line-height: 1.5;
      color: #BBB;
    }
    .edit {
      position: absolute;
      right: 30rpx;
      top: 30rpx;
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 24rpx;
    }
  }
.tabs {
  display: flex;
  height: 76rpx;
  box-sizing: border-box;
  padding: 0 20rpx;
  align-items: center;
  background-color: #FFFFFF;
  font-size: 28rpx;
  text {
    padding: 0 10rpx;
  }
  .active {
    color: #FF3C3C;
  }
}
.item {
  box-sizing: border-box;
  padding: 20rpx;
  display: flex;
  align-items: center;
  margin-top: 1rpx;
  background-color: #FFFFFF;
  image {
    width: 120rpx;
    height: 120rpx;
    background-color: #EFEFEF;
    
  }
  .info {
    flex: 1;
    box-sizing: border-box;
    padding-left: 10rpx;
    .name {
      font-size: 28rpx;
      line-height: 1.5;
    }
    .num {
      color: #999999;
      font-size: 24rpx;
      line-height: 1.5;
    }
  }
}
.search {
  height: 88rpx;
  display: flex;
  align-items: center;
  border-radius: 10rpx;
  background-color: #FFFFFF;
  box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.24);
  box-sizing: border-box;
  padding: 0 15rpx;
  
  input {
    font-size: 28rpx;
    flex: 1;
    padding-left: 10rpx;
  }
}
page {
  background-color: #EFEFEF;
}
.no-data {
  color: #999999;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  font-size: 28rpx;
}
</style>
